<template>
	<view class="content statusBarHeight">
		<view class="navigation_bar">

			<view style='display: flex; align-items: center;'>
				<uni-icons type="back" size="24" color="#fff" @click='GoBack'></uni-icons>
				<view class="titleName">
					多多券兑换
				</view>
			</view>

			<view class="leftIcon">
				<view class="textBtn" @tap="checkRecord">
					兑换记录
				</view>
			</view>
		</view>

		<view class="header">
			<view class="title">
				当前多多券（元）
			</view>
			<view class="money">
				{{walletInfo.balance}}
			</view>

		</view>

		<!-- <view class="box1">
			<view class="label">
				到账方式
			</view>
			<view class="value" v-if="!list.bankCardNumber" @click='handleBindBankCard'>
				添加兑换方式<uni-icons type="right" size="20" color="#BCBDBD"></uni-icons>
			</view>
			<view class="value" style='color: #000000;' @click='changeBindBankCard' v-else>
				{{list.openingBank}}-{{list.bankCardNumber}} <uni-icons type="right" size="20"
					color="#BCBDBD"></uni-icons>
			</view>
			<view class="value" style='color: #000000;'>
				交易所
			</view>

		</view> -->

		<view class="box2">
			<view class="label">
				兑换多多券
			</view>
			<view class='inputBox'>
				<input :placeholder="placeholderText" placeholder-class="placeholder" v-model="amount" class="input"
					type="number" maxlength="8" @input="numberFixedDigit" />

				<view class="allBtn" @click='amount = walletInfo.balance'>
					全部
				</view>
			</view>
			<view class="tips" v-if='tipsState'>
				输入金额不能大于当前多多券
			</view>
		</view>
		<!-- <view class="input-content">
			<text class="label">验证码</text>
			<input placeholder="请输入验证码" type="number" placeholder-class="placeholder" v-model="verifyCode" />
			<view class="code" @tap="getCodes">{{text}}</view>
		</view>
		<view class="submitBtn" :class='{"active-submit":amount}' @tap="goRechargeType" v-if="list.bankCardNumber">
			立即兑换
		</view> -->

		<view class="submitBtn active-submit" @tap="goRechargeType">
			立即兑换
		</view>
		<!-- <payPageCom :show='isProp' @close='isProp=false' @callBack="sure" /> -->
		<passWordPopup :show='isProp' @close='isProp=false' @callBack="sure" />
	</view>
</template>

<script>
	import {
		paymentList,
		withdrawApply,
		sendMsg,
		userBalance
	} from '../../api/api.js'
	import payPageCom from "@/components/basicComponents/payPage/index.vue"
	import passWordPopup from "@/components/basicComponents/passWordPopup.vue"
	export default {
		components: {
			passWordPopup,
			payPageCom
		},
		data() {
			return {
				// 手机号
				phone: '',
				// 是否展示购买弹窗
				isProp: false,
				text: '获取验证码',
				// 收款方式列表
				list: '',
				// 选择的收款方式 0为未选， 1为支付宝 2为银行卡
				isSelect: 0,
				// 兑换金额
				amount: '',
				// 支付密码
				payPassword: '',
				// 验证码
				verifyCode: '',
				// 收款方式id
				paymentId: '',
				walletInfo: '', // 钱包信息
				placeholderText: '',
				options: ''

			}
		},
		onShow() {
			this.phone = uni.getStorageSync('phone')
			// 获取收款方式列表
			this.getList()
			// 获取钱包信息
			this.getuserWalletInfo()
		},

		computed: {
			tipsState() {
				return Number(this.amount) > this.walletInfo.balance
			}
		},
		methods: {
			handleBindBankCard() {
				//  绑定银行卡
				uni.navigateTo({
					url: "/pages/set/addCard?options=1"
				})
			},
			changeBindBankCard() {
				// 修改银行卡
				uni.navigateTo({
					url: "/pages/set/paymentMethod?options=1"
				})
			},
			// 获取收款方式列表
			getList() {
				let data = {}
				paymentList(data).then(res => {
					this.list = res.data.bankCard
					this.paymentId = res.data.bankCard.id
				})
			},
			// 获取钱包信息
			getuserWalletInfo() {
				let data = {}
				userBalance(data).then(res => {
					this.walletInfo = res.data
					this.placeholderText = '¥可兑换金额' + this.walletInfo.balance
				})
			},
			// 查看兑换记录
			checkRecord() {
				uni.navigateTo({
					url: './moneyRecord'
				})
			},
			numberFixedDigit(e) { // 只能输入整数
				e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
				this.$nextTick(() => {
					this.amount = e.target.value
				})
			},
			// 清除兑换金额
			close() {
				this.amount = ''
			},
			// 添加收款方式
			add() {
				uni.navigateTo({
					url: '../set/addCard?options=1'
				})
			},
			// 选择收款方式
			chooseType() {
				this.paymentId = this.list.id
				// this.list.forEach( gitem => {
				// 	gitem.isSelect = false
				// 	if( item.id == gitem.id ) {
				// 		gitem.isSelect = true
				// 	}
				// })
				this.$forceUpdate()
			},
			//获取验证码
			getCodes() {
				if (this.text != '获取验证码') {
					return false
				}
				//判断手机号是否正确
				if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					let data = {
						phone: this.phone,
						type: 5
					}
					sendMsg(data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '验证码已发送，请注意查收~'
							})
							//正确-发送验证码，变化 text 文字
							var seconds = 60;
							this.text = seconds + 's后重新获取';
							let interval = setInterval(() => {
								if (seconds > 0) {
									seconds--;
									this.text = seconds + 's后重新获取'
								} else {
									this.text = '获取验证码';
									clearInterval(interval)
								}
							}, 1000)
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号~'
					})
				}
			},
			// 打开弹窗
			goRechargeType() {
				// if (!this.list.bankCardNumber) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请现绑定银行卡'
				// 	})
				// 	return false
				// }
				if (!this.amount) {
					uni.showToast({
						icon: 'none',
						title: '请输入兑换金额'
					})
					return false
				}
				if (this.amount < this.list.withdrawMinAmount) {
					uni.showToast({
						icon: 'none',
						title: '最少兑换金额为' + this.list.withdrawMinAmount
					})
					return false
				}
				// if (!this.paymentId) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择兑换方式'
				// 	})
				// 	return false
				// }
				// if (!this.verifyCode) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入验证码'
				// 	})
				// 	return false
				// }
				this.isProp = true
				this.payPassword = ''
			},
			// 关闭弹窗
			closeProp() {
				this.isProp = false
			},
			// 提交
			sure(payPassword) {
				if (!payPassword) {
					uni.showToast({
						icon: 'none',
						title: '请输入支付密码'
					})
					return false
				}
				let data = {
					payPassword: payPassword,
					msgCode: this.verifyCode,
					amount: this.amount,
					paymentId: this.paymentId,
				}
				withdrawApply(data).then(res => {
					uni.showToast({
						icon: 'none',
						title: '兑换成功，请等待审核~'
					})
					this.isProp = false
					this.amount = ''
					this.getuserWalletInfo()
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #F6F6F7;
	}

	.navigation_bar {
		width: 100vw;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
		background: #EB3B27;
		display: flex;
		justify-content: space-between;

		.titleName {
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.textBtn {
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}

	}

	.header {
		height: 100rpx;
		width: 100%;
		background: #EB3B27;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.title {
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			margin-bottom: 8rpx;
		}

		.money {
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.box1 {
		width: 710rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.label {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}

		.value {
			font-weight: 400;
			font-size: 28rpx;
			color: #BCBDBD;
			display: flex;
			align-items: center;
		}
	}

	.box2 {
		width: 710rpx;
		height: 204rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 28rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.label {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}

		.inputBox {
			width: 100%;
			height: 68rpx;
			border-bottom: 2rpx solid #F9F9F9;
			margin-top: 18rpx;
			display: flex;
			align-items: center;
			position: relative;

			.allBtn {
				font-weight: 800;
				font-size: 28rpx;
				color: #EB3B27;
				position: absolute;
				top: 20rpx;
				right: 10rpx;
			}

			.input {
				width: 100%;
			}
		}

		.tips {
			font-weight: 500;
			font-size: 20rpx;
			color: #B9585D;
			margin-top: 10rpx;
		}
	}

	.submitBtn {
		width: 710rpx;
		height: 88rpx;
		background: #E1E1E1;
		border-radius: 88rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.active-submit {
		background: #EB3B27;
	}

	.input-content {
		width: 710rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.label {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}

		.code {
			position: absolute;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #53A700;
			top: 27rpx;
			right: 24rpx;
		}

		.input-img {
			width: 44rpx;
			height: 44rpx;
			top: 23rpx;
			left: 24rpx;
			position: absolute;
		}

		input {
			height: 90rpx;
			line-height: 90rpx;
			flex: 1;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			margin-left: 20rpx;
		}

		.placeholder {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
	}
</style>